<template>
    <div>
      <!-- 筛选条件 -->
      <el-form :inline="true" :model="filters">
        <el-form-item label="招商范围">
          <el-select v-model="filters.category" placeholder="不限">
            <el-option label="不限" value=""></el-option>
            <el-option label="玩具乐器" value="toys"></el-option>
            <el-option label="二手商品" value="secondhand"></el-option>
            <!-- 添加更多选项 -->
          </el-select>
        </el-form-item>
        <el-form-item label="佣金比例">
          <el-select v-model="filters.commissionRatio" placeholder="不限">
            <el-option label="不限" value=""></el-option>
            <el-option label="1%-5%" value="1-5"></el-option>
            <el-option label="5%-10%" value="5-10"></el-option>
            <!-- 添加更多选项 -->
          </el-select>
        </el-form-item>
        <el-form-item label="服务费率">
          <el-select v-model="filters.serviceFee" placeholder="不限">
            <el-option label="不限" value=""></el-option>
            <el-option label="1%以下" value="1"></el-option>
            <el-option label="1%-3%" value="1-3"></el-option>
            <!-- 添加更多选项 -->
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input v-model="filters.searchId" placeholder="搜索ID"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button @click="clearFilters">清空</el-button>
        </el-form-item>
      </el-form>
  
      <!-- 按钮组 -->
      <div>
        <el-button type="success">批量报名</el-button>
        <el-button type="warning">同步活动</el-button>
      </div>
  
      <!-- 活动列表 -->
      <el-table :data="promotions" style="width: 100%">
        <el-table-column prop="name" label="活动名称"></el-table-column>
        <el-table-column prop="period" label="推广期"></el-table-column>
        <el-table-column prop="description" label="活动说明"></el-table-column>
      </el-table>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        filters: {
          category: "",
          commissionRatio: "",
          serviceFee: "",
          searchId: ""
        },
        promotions: [
          {
            name: "[热度云] 商家专享千万流量助力商家带货推广活动",
            period: "2023-07-19 至 2025-07-31",
            description: "高效曝光，助力推广"
          }
          // 添加更多活动
        ]
      };
    },
    methods: {
      search() {
        console.log("搜索按钮点击，当前筛选条件：", this.filters);
        // 根据筛选条件获取数据
      },
      clearFilters() {
        this.filters = {
          category: "",
          commissionRatio: "",
          serviceFee: "",
          searchId: ""
        };
      }
    }
  };
  </script>
  
  <style scoped>
  /* 自定义样式 */
  </style>
  